<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script  src="../js/vue.js"></script>  
<script  src="../js/jquery.min.js"></script>
</head>

<body>
   <div id="app">
<my-component    v-bind:myname="myName"  :myage="myAge"></my-component>
   </div>
<template id="child_temp">   
      <table>
        <tr>
            <th colspan="3">子组件数据</td>
        </tr>
        <tr>
            <td>my name</td>
            <td><input v-model="name"/></td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>my age</td>
            <td><input v-model="age"></td>
            <td>{{age}}</td>
        </tr>
		 <tr>
            <td></td>
            <td><button @click="incrementCounter">{{count}}</td>
            <td></td>
        </tr>
    </table>
</template>  
</body>

<script>
var child=Vue.component('child-test',{
template:'#child_temp',
data:function(){
return{
count:0
}
},
props:["name","age"],
methods:{
incrementCounter:function(){
this.count ++;
this.$emit('increment',this.count);//触发事件
}

}
})

var parent=Vue.extend({
template:'<div><p>name:<input v-model="myname"> {{myname}}</p>'+
'<p>age:<input v-model="myage"/>{{myage}}</p>'+
'<p>total:{{total}}</p>'+
'<child-component  v-bind:name="myname"  v-bind:age="myage"  @increment="incrementTotal(n)"></child-component></div>',
components:{
'child-component':child
},
data:function(){
return{
total:0
}
},
props:['myname','myage'],
methods:{
incrementTotal:function(n){
this.total ++;
this.total+=n;
}
}
});

Vue.component('my-component',parent);

new Vue({
el:'#app',
data:{
myName:'chen',
myAge:25
}
})
</script>
</html>